<template>
    <div class="weapons">
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <ul class="weaponList" v-if="!pageStat">
            <Title :titleName="this.$route.params.id"></Title>
            <div class="collapse">
                <li v-for="item in weaponList" :key="item.id">
                    <div class="weaponItem">
                        <div class="right" @click="selectWeaponInfo(item.weaponId)" ref="selectWeaponInfo">
                            <img :src="item.imgUrl" alt="武器图片" class="weaponImg">
                            <div class="weaponInfo">
                                <span class="weaponName">{{item.weaponName}}</span>
                                <div class="weaponType">
                                    <span>{{item.tier}} </span>
                                    <span>{{item.type}} </span>
                                    <div class="attribute">
                                        <img :src="item.attributeImg" alt="">
                                        <span>{{item.attribute}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="collapase_click" @click="selectCollapse(item.id)">

                        </div>
                    </div>
                    <transition name="fade">
                        <div class="collapse_item" v-if="activeNames===item.id">
                            <table class="weapon_table">
                                <thead>
                                    <tr>
                                        <th>Power</th>
                                        <th>Impact</th>
                                        <th>Range</th>
                                        <th>Rounds Per Minute</th>
                                        <th>Magazine</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td v-for="stat in item.stat" :key="stat">{{stat}}</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </transition>

                </li>
            </div>
        </ul>
        <!-- <van-pagination v-model="currentPage" :total-items="18" :items-per-page="1" @change="changePage" /> -->
    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'
    import Title from '@/components/title/Title.vue'
    export default {
        data() {
            return {
                pageStat: true,
                activeNames: -1,
                weaponList: []
            }
        },
        components: {
            Loading,
            Title
        },
        created() {
            this.getWeaponList(1)
        },
        methods: {
            getWeaponList(currentPage) {
                if (this.$route.params.id === "New Exotic Weapons") {
                    axios.get("/api/getNewExoticWeapons", {
                            params: {
                                page: currentPage
                            }
                        })
                        .then(res => {
                            this.weaponList = res.data
                            this.$nextTick(() => {
                                this.pageStat = false
                            })
                        })
                        .catch(err => {
                            console.error(err);
                        })
                } else {
                    axios.get("/api/getNewWeapons", {
                            params: {
                                page: currentPage
                            }
                        })
                        .then(res => {
                            this.weaponList = res.data
                            this.$nextTick(() => {
                                this.pageStat = false
                            })
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }

            },
            selectCollapse(id) {
                if (this.activeNames === id) {
                    this.activeNames = -1
                } else {
                    this.activeNames = id
                }

            },
            selectWeaponInfo(weaponId) {
                this.$store.commit('changeWeaponCurrentpage', this.currentPage)
                var id = weaponId
                this.$router.push({
                    name: "WeaponInfo",
                    params: {
                        id
                    },
                });
            },
            back() {
                this.$router.go(-1)
            }

        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        align-items: center;
        border-bottom: 1px #ccc solid;
        padding: 5px 0;
    }

    .title_info {
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        margin-left: -50px;

    }

    .title_icon {
        width: 50px;
        height: 50px;
    }

    .back {
        width: 40px;
        height: 40px;
        padding-left: 5px;
    }

    .title_name {
        font-size: 25px;
        font-weight: bold;
    }

    .weapons {
        height: 100%;
    }

    .loading {

        height: 812px;
        overflow: hidden;
    }

    .weaponItem {
        display: flex;
        background: #1F1F1F;
        border-bottom: 1px solid #ccc;

    }

    .right {
        display: flex;
        flex: 1;
    }

    .weaponImg {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin: 10px;
    }

    .weaponInfo {
        color: white;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
    }

    .weaponName {
        font-size: 20px;
        font-weight: bold;
    }

    .weaponType {
        display: flex;
        font-size: 12px;
        margin-top: 5px;
    }

    .attribute {
        display: flex;
        align-items: center;
    }

    .attribute>img {
        width: 13px;
        height: 13px;
    }

    .weaponType>:not(:last-child):after {
        content: " | ";
        color: var(--text-color-muted);
        opacity: .5;
    }

    .collapse_item {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
    }

    .weapon_table {
        background: rgb(49, 48, 48);
        width: 100%;
        padding: 5px 7px;

    }


    .collapase_click {
        width: 20px;
        height: 20px;
        margin: 25px 20px;
        background: #ccc;

    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>